<template>
	<div class="main-content">
		<!-- row-f03 -->
		<div class="row-f03">
			<div class="wp">
				<div class="col-aside">
					<!-- m-aside02 -->
					<div class="m-box01 m-aside02">
						<div class="search g-search02">
							<el-input
						    placeholder="搜索"
						    v-model="search">
						    <i slot="prefix" class="el-input__icon el-icon-search"></i>
						  </el-input>
						</div>
						<div class="con">
							<div class="top">
								<div class="left">币对</div>
								<div class="right">
									<g-icon01
										@orderFun="orderFun"
									></g-icon01>
								</div>
							</div>
							<ul class="ul-list01">
								<li
									v-for="(item,index) of list01"
									:class="{'active': current == index}"
									@click="changeCurrent(index)"
								>
									<div class="inner">
										<div class="right">
											<span :class="[item.up.indexOf('+') >= 0 ? 'index-green' : 'index-red']">{{ item.up }}</span>
										</div>
										<div class="left">
											<i class="icon el-icon-star-off"></i><span>{{ item.type }}</span>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<!-- m-aside02 end -->
					<!-- m-aside03 -->
					<div class="m-aside03">
						<my-snv
							:snv="snv"
							@currentChange="changeCurrent"
							ref="snv"
						></my-snv>
					</div>
					<!-- m-aside03 end -->
				</div>
				<div class="col-main">
					<router-view></router-view>
				</div>
			</div>
		</div>
		<!-- row-f03 end -->
	</div>
</template>

<script>
	import gIcon01 from "@/components/gIcon01"
	import mySnv from "@/components/mySnv"
	export default {
		data() {
			return {
				search: "",
				snv: [
					{
						title: "交易信息",
						icon: "icon-menu-information",
						list: [
							{
								title: "币币委托",
								index: -1,
								to: {
									name: ""
								}
							},
							{
								title: "币币账单",
								index: -2,
								to: {
									name: ""
								}
							}
						]
					}
				],
				list01: [
					{
						id: "001",
						type: "AMBR/USDT",
						up: "+10.40%"
					},
					{
						id: "002",
						type: "AMBR/USDT",
						up: "+10.40%"
					},
					{
						id: "003",
						type: "AMBR/USDT",
						up: "+10.40%"
					},
					{
						id: "004",
						type: "AMBR/USDT",
						up: "+10.40%"
					},
					{
						id: "005",
						type: "AMBR/USDT",
						up: "+10.40%"
					},
					{
						id: "006",
						type: "AMBR/USDT",
						up: "+10.40%"
					},
					{
						id: "007",
						type: "AMBR/USDT",
						up: "+10.40%"
					},
					{
						id: "008",
						type: "AMBR/USDT",
						up: "+10.40%"
					},
					{
						id: "009",
						type: "AMBR/USDT",
						up: "-10.40%"
					},
					{
						id: "0010",
						type: "AMBR/USDT",
						up: "-10.40%"
					},
					{
						id: "0011",
						type: "AMBR/USDT",
						up: "-10.40%"
					},
					{
						id: "0012",
						type: "AMBR/USDT",
						up: "-10.40%"
					},
					{
						id: "0013",
						type: "AMBR/USDT",
						up: "-10.40%"
					},
					{
						id: "0014",
						type: "AMBR/USDT",
						up: "-10.40%"
					},
					{
						id: "0015",
						type: "AMBR/USDT",
						up: "-10.40%"
					},
					{
						id: "0016",
						type: "AMBR/USDT",
						up: "-10.40%"
					}
				],
				current: 0
			}
		},
		components: {
			gIcon01,
			mySnv
		},
		created() {
		},
		methods: {
			changeCurrent (index){
				this.current = index;
				if(index > 0){
					this.$refs.snv.changeCurrent1(index);
					this.goto({'name': 'Product',meta: { id: this.list01.id }});	
				}
			},
			orderFun(state) {
				console.log(state);
			},
			goto(obj) {
				this.$router.push(obj);
			}
		}
	}
</script>

<style>
</style>
